<template>
    <fieldset>
        <legend>产品</legend>
        <ul>
            <li v-for="item in products" :key="item.id">
                <b>产品名称：{{ item.title }}</b>
                &nbsp;&nbsp;
                <b>价格：{{ item.price }}</b>
                &nbsp;&nbsp;
                <b>库存：{{ item.inventory }}</b>
                &nbsp; &nbsp;
                <button @click="minus(item)">加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>


<script setup>
// 引入 store
import { user } from "../../store/products.js"
import { cart } from "../../store/cart.js"
import { storeToRefs } from "pinia"

let userStore = user()
console.log(userStore);

let cartStore = cart()
let { carts } = storeToRefs(cartStore)



let { products } = storeToRefs(userStore)

userStore.fetch_data()

console.log(userStore.products);



let minus = (item) => {
    // console.log(123);
    item.inventory--
    let target = cartStore.carts.find(p => p.id === item.id)
    if(!target){
        let obj = {
        id: item.id,
        title: item.title,
        price: item.price,
        count: 1
    }
    cartStore.carts.push(obj)
    }else{
        target.count++
    }

}


</script>